<template>
    <div class="survey-detail">
      <div class="breadcrumb">
        <span @click="goToSurveyAll">调查统计</span> &gt;
        <span @click="goToSurveyAll">全部</span> / 
        <span @click="goToSurveySubmitted">已提交</span> / 
        <span @click="goToSurveyNotSubmitted">未提交</span> &gt;
        <span v-if="survey">{{ survey.title }}</span>
        <button @click="goBack" class="back-button">返回</button>
      </div>
      <div class="survey-container" v-if="survey">
        <h2>{{ survey.title }}</h2>
        <form @submit.prevent="submitSurvey">
          <div v-for="(question, index) in survey.questionsList" :key="index" class="question">
            <label :for="'question' + index" class="question-title">{{ question.title }}</label>
            <ul class="options">
              <li>
                <input type="radio" :name="'question' + index" :id="'question' + index + 'a'" :value="question.a_option" v-model="answers[index]">
                <label :for="'question' + index + 'a'">{{ question.a_option }}</label>
              </li>
              <li>
                <input type="radio" :name="'question' + index" :id="'question' + index + 'b'" :value="question.b_option" v-model="answers[index]">
                <label :for="'question' + index + 'b'">{{ question.b_option }}</label>
              </li>
              <li>
                <input type="radio" :name="'question' + index" :id="'question' + index + 'c'" :value="question.c_option" v-model="answers[index]">
                <label :for="'question' + index + 'c'">{{ question.c_option }}</label>
              </li>
              <li>
                <input type="radio" :name="'question' + index" :id="'question' + index + 'd'" :value="question.d_option" v-model="answers[index]">
                <label :for="'question' + index + 'd'">{{ question.d_option }}</label>
              </li>
            </ul>
          </div>
          <button type="submit" class="submit-button">提交</button>
        </form>
      </div>
      <div v-else>
        <p>正在加载问卷数据...</p>
      </div>
      <div v-if="submitSuccess" class="modal">
        <div class="modal-content">
          <p>提交成功！</p>
          <button @click="closeModal" class="close-button">关闭</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: 'SurveyDetail',
    data() {
      return {
        survey: null,
        answers: [],
        submitSuccess: false
      };
    },
    created() {
      this.fetchSurvey();
    },
    methods: {
      fetchSurvey() {
        axios.get('http://8.138.12.59:1999/survey')
          .then(response => {
            if (response.data.code === 'S0000') {
              this.survey = response.data.data;
              this.answers = new Array(this.survey.questionsList.length).fill('');
            }
          })
          .catch(error => {
            console.error('Error fetching survey:', error);
          });
      },
      goToSurveyAll() {
        this.$router.push('/survey/surveyall');
      },
      goToSurveySubmitted() {
        this.$router.push('/survey/surveysubmitted');
      },
      goToSurveyNotSubmitted() {
        this.$router.push('/survey/surveynot-submitted');
      },
      goBack() {
        this.$router.go(-1);
      },
      submitSurvey() {
        console.log('Survey answers:', this.answers);
        this.submitSuccess = true;
      },
      closeModal() {
        this.submitSuccess = false;
      }
    }
  };
  </script>
  
  <style scoped>
  .survey-detail {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px;
    text-align: left;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    
  }
  
  .breadcrumb {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .breadcrumb span {
    color: #007bff;
    cursor: pointer;
  }
  
  .breadcrumb span:hover {
    text-decoration: underline;
  }
  
  .breadcrumb .back-button {
    background-color: #f0fcff;
    color: #007bff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    float: right;
  }
  
  .breadcrumb .back-button:hover {
    background-color: #b2ebf2;
  }
  
  .survey-container {
    text-align: left;
  }
  
  .survey-container h2 {
    margin-top: 0;
    color: #007bff;
  }
  
  .question {
    margin-bottom: 20px;
  }
  
  .question-title {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: bold;
    font-size: 18px;
  }
  
  .options {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
  }
  
  .options li {
    margin-bottom: 8px;
    color: #333;
  }
  
  .submit-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .submit-button:hover {
    background-color: #0056b3;
  }
  
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .close-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
  }
  
  .close-button:hover {
    background-color: #0056b3;
  }
  </style>